import React, { Component } from 'react'
import axios from 'axios';
import './index.css';

export default class Joke extends Component {

    state = {
        duanzis: []
    }

    render() {
        return (
            <div>
                <table border="1">
                    <thead>
                        <tr><td>ID</td><td>作者</td><td>内容</td><td>热评</td></tr>
                    </thead>
                    <tbody>
                        {
                            this.state.duanzis.map(item => {
                                return <tr>
                                        <td>{item.sid}</td>
                                        <td>{item.name}</td>
                                        <td>{item.text}</td>
                                        <td>{item.top_comments_content}</td>
                                    </tr>
                            })
                        }
                    </tbody>
                </table>
            </div>
        )
    }

    //发送 AJAX 请求的时机 要根据需求来设置
    async componentDidMount(){
        let result = await axios('https://api.apiopen.top/getJoke?type=text');
        //将数据保存在 state 中
        this.setState({
            duanzis: result.data.result
        })
    }

}
